<template>
  <div id='buoy-wrapper'>
    <div id="buoyBox"
         :style='{top: defaultTop + "px"}'
         @click= "click">
      <slot></slot>
    </div>
    <!-- <div id="buoyBox"
         @mousedown= "down" @touchstart.stop= "down"
         @mousemove= "move" @touchmove.stop= "move"
         @mouseup= "end" @touchend.stop= "end"
         @click= "click">
      <slot></slot>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'buoy',
  components: {},
  data () {
    return {
      isMoving: false,
      position: { x: 0, y: 0 },
      nx: '', // 拖拽x的距离
      ny: '', // 拖拽y的距离
      dx: '', // 拖拽前left值
      dy: '', // 拖拽前top值
      xPum: '', // 拖拽后left值
      yPum: '', // 拖拽后top值
      buoyBox: {},
      screenWidth: 0,
      screenHeight: 0
    }
  },
  props: {
    // 拖拽完成后，根据位置，自动贴在页面两侧
    autoStick: {
      type: Boolean,
      default: false
    },
    // 永远保持上一次拖拽后的位置
    lockPosition: {
      type: Boolean,
      default: true
    },
    // 默认的距离顶部的距离
    defaultTop: {
      type: Number,
      default: 30
    }
  },
  methods: {
    down () {
      this.isMoving = true
      this.$emit('startMove')
      var touch
      if (event.touches) {
        touch = event.touches[0]
      } else {
        touch = event
      }
      this.position.x = touch.clientX
      this.position.y = touch.clientY
      this.dx = this.buoyBox.offsetLeft
      this.dy = this.buoyBox.offsetTop
    },
    move () {
      if (this.isMoving) {
        var touch
        if (event.touches) {
          touch = event.touches[0]
        } else {
          touch = event
        }
        this.nx = touch.clientX - this.position.x
        this.xPum = this.dx + this.nx
        if (this.xPum > this.screenWidth - 15 - 44) {
          this.xPum = this.screenWidth - 15 - 44
        } else if (this.xPum < 0) {
          this.xPum = 15
        }
        this.ny = touch.clientY - this.position.y
        this.yPum = this.dy + this.ny
        if (this.yPum < 0) {
          this.yPum = 0
        } else if (this.yPum > this.screenHeight - 44) {
          this.yPum = this.screenHeight - 44
        }
        // this.buoyBox.style.left = this.xPum + 'px'
        this.buoyBox.style.top = this.yPum + 'px'
      }
    },
    end () {
      if (this.autoStick) {
        if (this.xPum < (this.screenWidth / 2)) {
          this.xPum = 15
          // this.buoyBox.style.left = this.xPum + 'px'
        } else {
          this.xPum = this.screenWidth - 15 - 44
          // this.buoyBox.style.left = this.xPum + 'px'
        }
      }
      this.isMoving = false
      localStorage.setItem('buoyLeft', this.xPum)
      localStorage.setItem('buoyTop', this.yPum)
      this.$emit('endMove')
    },
    click () {
      this.$emit('clicked')
    }
  },
  mounted () {
    // this.screenWidth = window.screen.width
    // this.screenHeight = window.innerHeight
    // this.buoyBox = document.querySelector('#buoyBox')
    // this.buoyBox.style.left = this.screenWidth - 44 + 'px'
    // if (this.lockPosition) {
    //   this.xPum = localStorage.getItem('buoyLeft') ? localStorage.getItem('buoyLeft') : parseInt(window.getComputedStyle(this.buoyBox).left)
    //   this.yPum = localStorage.getItem('buoyTop') ? localStorage.getItem('buoyTop') : parseInt(window.getComputedStyle(this.buoyBox).top)
    //   // this.buoyBox.style.left = this.xPum + 'px'
    //   this.buoyBox.style.top = this.yPum + 'px'
    // }
  }
}
</script>

<style scoped lang='stylus'>
#buoy-wrapper
  #buoyBox
    border 1px solid #fff
    position fixed
    // top calc(50vh - 20px)
    // left calc(100vw - 44px)
    top 30px
    right 0
    z-index 100
    height 26px
    width 53px
    border-radius 16px 0 0 16px
    overflow hidden
    // background #ffffff
    color #6EC4E9
    font-size 12px
    box-shadow:-10px 0px 30px 0px rgba(69,70,75,0.1),-2px 0px 6px 0px rgba(42,43,48,0.15);
</style>
